<style>
  .layui-input-inline{margin-top:10px;}
</style>
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>数据分析</cite></a>
    <a><cite>支付通道统计</cite></a>
    <a><cite>支付子账户统计</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">支付子账户统计</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row" style="margin-bottom: 10px;">
            <div class="layui-form" style="float:right;">
              <div id="timeDiv" class="layui-form-item" style="margin:0;">
                  <a id="search" style="margin-top: 10px" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
              </div>
            </div>
          </div>

          <table id="XxPay_Pay_Passage_Account" lay-filter="XxPay_Pay_Passage_Account"></table>
        </div>

      </div>
    </div>
  </div>
</div>

<script>
    layui.use(['table', 'admin', 'util', 'timePick'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,table = layui.table
            ,element = layui.element
            ,timePick = layui.timePick
            ,form = layui.form;

        timePick.initDate(-7,0);  //第一个参数表示开始时间   第二个表示结束时间   0,0今天   -1,-1昨天   -7,0近一周   以此类推
        element.render('breadcrumb', 'breadcrumb');

        var router = layui.router();
        var payPassageId = router.search.payPassageId;

        var createTimeStart = $('#createTimeStart').val();
        var createTimeEnd = $('#createTimeEnd').val();

        var tplRate = function(d){
            var rate = "";
            if (d.payTotalCount == 0) {
                rate = "0.00";
            }else {
                rate = parseFloat((d.paySuccessCount/d.payTotalCount)*100).toFixed(2);
            }
            var d = rate + "%";
            if(parseFloat(rate) >= 50.00) {
                return "<span style='color: green'>" + d + "</span>";
            }else if(parseFloat(rate) < 50.00) {
                return "<span style='color: red'>" + d + "</span>";
            }
        };

        // 统计列表
        table.render({
            elem: '#XxPay_Pay_Passage_Account'
            ,cellMinWidth: 90
            ,url: layui.setter.baseUrl + '/data/count4PayPassageAccount'
            ,where: {
                access_token: layui.data(layui.setter.tableName).access_token,
                createTimeStart: createTimeStart,
                createTimeEnd: createTimeEnd,
                payPassageId: payPassageId
            }
            ,id: 'tableReload'
            ,page: true
            ,cols: [[
                {field: 'payPassageAccountId', title: '子账户ID'}
                ,{field: 'ifCode', title: '接口代码'}
                ,{field: 'paySuccessAmount', title: '收款金额', sort: true, templet: '<div>{{ d.paySuccessAmount/100 }}</div>'}
                ,{field: 'payTotalAmount', title: '总金额', sort: true, templet: '<div>{{ d.payTotalAmount/100 }}</div>'}
                ,{field: 'totalChannelCost', title: '通道成本', sort: true, templet: '<div>{{ d.totalChannelCost/100 }}</div>'}
                ,{field: 'paySuccessCount', title: '笔数', sort: true, templet: '<div>{{ d.paySuccessCount+"/"+d.payTotalCount }}</div>'}
                ,{field: 'payTotalCount', title: '成功率', sort: true, templet: tplRate}
            ]]
            ,skin: 'line'
        });


        // 搜索
        var $ = layui.$, active = {
            reload: function(){
                var createTimeStart = $('#createTimeStart').val();
                var createTimeEnd = $('#createTimeEnd').val();
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        createTimeStart: createTimeStart,
                        createTimeEnd: createTimeEnd,
                    }
                });
            }
        };
        $('#search').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 渲染表单
        form.render();
    });
</script>